<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }

        input {
            float: left;
        }

        #searchtxt {
            width: 222px;
            height: 38px;
            line-height: 38px;
            padding-left: 30px;
            border: none;
            background: url(../img/bg.jpg) no-repeat;
            outline: none;
        }

        .search_btn {
            width: 90px;
            height: 38px;
            line-height: 38px;
            border: none;
            background: url('../img/btn.jpg') no-repeat;
            margin-left: -4px;
            outline: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <input name="" type="text" class="search_txt" value="电风扇" id="searchtxt" />
    <input type="button" class="search_btn" />
    <span class="valid-search-txt">*</span>

</body>
<script src="../js/jq-1.12.4.js"></script>
<script>
    $(function () {
        //获得焦点清空当前input
        $(".search_txt").focus(function () {
            $(this).val("") //.val()获得值
            $(".valid-search-txt").html("") //.html() 设置html内容 相当于innerHTML

        })
        //失去焦点时获得input的值
        $(".search_txt").blur(function () {
            let v = $(this).val()
            let span = $(".valid-search-txt")
            span.html("")
            span.css("color", "red")
            if (!v) {
                span.html("搜索关键字不能为空！")
                return false
            }
            if (v.length > 12) {
                span.html("搜索关键字长度不能超12个字符！")
                return false
            }
            return true
        })

    })
</script>

</html>